<template>
	<view class="app-container">
		<view class="edittaskphone-container">
			<u-form :model="formData" :rules="rules" ref="form" labelPosition="top">
				<div class="form-item">
					<label class="require">手机号</label>
					<u-form-item label="" prop="phone">
						<u-input placeholder="请输入您的手机号码" v-model="formData.phone"></u-input>
					</u-form-item>
				</div>
				<div class="form-item">
					<u-input v-model="formData.number">
						<template slot="suffix">
							<text style="color: #00b6fc; font-size: 14px" @click="sendCmd()">发送验证码</text>
						</template>
					</u-input>
				</div>
				<div class="form-item">
					<label class="require">昵称</label>
					<u-form-item label="" prop="nickName">
						<u-input placeholder="请输入您的昵称" v-model="formData.nickName"></u-input>
					</u-form-item>
				</div>
				<div class="form-item">
					<label class="require">密码</label>
					<u-form-item label="" prop="password">
						<u-input placeholder="请输入您的密码" type="password" v-model="formData.password"></u-input>
					</u-form-item>
				</div>
				<div class="form-item">
					<label class="require">确认密码</label>
					<u-form-item label="" prop="password2">
						<u-input placeholder="请再次输入您的密码" type="password" v-model="formData.password2"></u-input>
					</u-form-item>
				</div>
				<div class="form-item">
					<label class="require">编号</label>
					<u-form-item label="" prop="cards">
						<u-input placeholder="请输入您的编号" v-model="formData.cards"></u-input>
					</u-form-item>
				</div>
				<div class="form-item">
					<label>微信手机号</label>
					<u-form-item label="" prop="weixin">
						<u-input placeholder="仅用于自动登录部分任务APP" v-model="formData.weixin"></u-input>
					</u-form-item>
				</div>
				<div class="form-item">
					<label>微信实名</label>
					<u-form-item label="" prop="weixinName">
						<u-input placeholder="仅用于自动登录部分任务APP" v-model="formData.weixinName"></u-input>
					</u-form-item>
				</div>
				<div class="form-item">
					<label>支付宝实名</label>
					<u-form-item label="" prop="zhifubaoName">
						<u-input placeholder="仅用于自动登录部分任务APP" v-model="formData.zhifubaoName"></u-input>
					</u-form-item>
				</div>
				<div class="form-item">
					<label>身份证号码</label>
					<u-form-item label="" prop="cardName">
						<u-input placeholder="仅用于自动登录部分任务APP" v-model="formData.cardName"></u-input>
					</u-form-item>
				</div>
				<div style="font-size: 14px; text-align: center; margin: 12px 0 40px">以上所有信息均进行保密，请放心填写</div>
				<u-button text="立即添加" shape="circle" type="primary" @click="onClick"></u-button>
			</u-form>
		</view>
	</view>
</template>

<script>
	import {
		updateTaskPhone
	} from '@/api/api.js'
	export default {
		data() {
			return {
				formData: {
					phone: '',
					number: '',
					nickName: '',
					password: '',
					password2: '',
					cards: '',
					weixin: '',
					weixinName: '',
					zhifubaoName: '',
					cardName: '',
					channel: 'starsmoon'
				},
				rules: {
					phone: [{
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					}],
					nickName: [{
						required: true,
						message: '请填写昵称',
						trigger: ['blur', 'change']
					}],
					password: [{
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					}],
					password2: [{
						required: true,
						message: '请再次确认密码',
						trigger: ['blur', 'change']
					}],
					cards: [{
						required: true,
						message: '请填写编号',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		methods: {
			//获取验证码
			sendCmd: function() {},
			onClick() {
				this.$refs.form.validate().then(res => {
					uni.showLoading({
						mask: true
					})
					updateTaskPhone(this.formData)
						.then((res) => {
							if (res.code === 10000) {
								uni.showToast({
									title: '更新成功',
									success() {
										uni.switchTab({
											url: '/pages/index/index'
										})
									}
								})
							}
						})
						.finnally(() => {
							uni.hideLoading()
						})
				}).catch(errors => {})

			}
		}
	}
</script>

<style lang="scss">
	.edittaskphone-container {
		background-color: #fff;
		padding: 14px;

		.form-item {
			margin-bottom: 16px;

			&:last-of-type {
				margin-bottom: 36px;
			}

			.u-form-item__body {
				padding: 0 !important;
			}

			label {
				line-height: 22px;
				font-size: 16px;
				position: relative;

				&.require:after {
					content: '';
					width: 16px;
					height: 16px;
					position: absolute;
					right: -16px;
					top: 3px;
					background: url('@/static/icons/bitian.svg') no-repeat;
				}
			}

			.u-input {
				margin-top: 12px;
				background-color: #f5f6f7;
				border-radius: 8px;

				&::placeholder {
					color: #c7c7c7;
				}
			}
		}

		.u-button {
			margin-bottom: 30px;
		}
	}
</style>
